<template>
  <span>{{ info.name }}</span>
  <span>{{ info.firend.name }}</span>
  <button @click="btnClick">点击改变info</button>
  <button @click="btnClick2">点击改变info.name</button>
  <button @click="btnClick3">点击info.firend.name</button>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      info: {
        name: 'zjd',
        age: 19,
        firend: {
          name: 'aaa',
        },
      },
    }
  },
  watch: {
    // 1.默认浅层比较
    // info(newV, oldV) {
    //   console.log(newV, oldV)
    // },
    // 2.c
    info: {
      handler: function (newV, oldV) {
        console.log(newV, oldV)
      },
      // 深层比较监听
      deep: true,
      // 第一次立即执行
      immediate: true,
    },
  },
  methods: {
    btnClick() {
      // 1.次方法可以被监听到。浅层比较
      this.info = {
        name: 'hq',
        age: 18,
        firend: {
          name: 'bbb',
        },
      }
    },
    btnClick2() {
      this.info.name = 'hq'
    },
    btnClick3() {
      this.info.firend.name = 'bbb'
    },
  },
}
</script>
<style scoped></style>
